import {Control, Link} from "react-keeper";
require('./PageMyInfo.less');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Utils from '../../../utils/index';
import {List, NavBar,Card,Button,Modal, Badge,WhiteSpace
} from 'antd-mobile';
import tpyh from '../../../assets/icon/用户S.png';
import tphouse from '../../../assets/icon/房子A.png';
import Store from './Store';

const Item = List.Item;
const Brief = Item.Brief;

class MyInfo extends React.Component {
  constructor(props) {
    super(props);
    this.goHome = this.goHome.bind(this);
    this.goSign = this.goSign.bind(this);
  }

  goSign(e) {
    Control.go("/xq/register", null);
  }

  goHome() {
    Control.go("/home/my", null);
  }

  render() {

    let userInfo = this.state.info.userInfo;
    let doors = this.state.info.doors;
    return (

      <div className="container" id="container">
        <NavBar mode="dark">我的房产</NavBar>
        <Card.Header
          title={userInfo.nickname}
          thumb={tpyh}
          extra={
            <div style={{height: '100%', width: '100%'}} >
              <Button type="ghost" onClick={this.goSign}  size="small" inline>绑定</Button>
            </div>
          }
        />
        <List renderHeader={() => '房产信息'} className="my-list">
          {
            doors && doors.length > 0 ?
              doors.map((item)=>{
                return (
                  <div onClick={
                    () => {
                      Control.go('/home/vote/ywh/c/'+item.courtId)
                      // Modal.alert(
                      //   '提示',
                      //   '敬请期待',
                      //   [
                      //     { text: '关闭', onPress: () => console.log('关闭')}
                      //   ]
                      // );
                    }
                  }>
                    <Item thumb={tphouse} arrow="horizontal" extra={<Badge text={ item.bing===true ? '已绑定' : '未绑定'} />}>
                      {item.courtName}<a style={{ display: 'block', color: '#108ee9' }}>{item.building+"栋"+item.unit+"单元"+item.doorplateNo}</a>
                    </Item>
                  </div>
                )
              })
              :
              <div className="no-data-div">暂无数据</div>
          }
        </List>
      </div>
    );
  }

  componentWillMount() {
    Actions.enterInfo();
  }

  componentDidMount() {
  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.info || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  componentWillUpdate(nextProps, nextState) {

  }


  componentDidUpdate(prevProps, prevState) {

  }


  componentWillUnmount() {

  }

}

ReactMixin.onClass(MyInfo, Reflux.connect(Store, 'info'));


export default MyInfo ;
